<template>
  <div>
    <el-table :data="saveList">
      <el-table-column label="路径" align="center" prop="filePath" />
      <el-table-column label="时间" align="center" prop="updateTime" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="title" :visible.sync="visible" width="780px" append-to-body>
      <el-form ref="formRef" :model="form" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="路径" prop="filePath">
              <el-input v-model="form.filePath" placeholder="请输入路径"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="时间" prop="backupsInterval">
              <el-input v-model="form.backupsInterval" placeholder="请输入时间间隔"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="启用状态" prop="enableStatus">
              <el-switch v-model="form.enableStatus" active-text="启用" inactive-text="停用" :active-value="1"
                :inactive-value="0">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    findData, //获取备份数据
    putData //修改备份
  } from '@/api/system/saveMsg.js'
  export default {
    data() {
      return {
        form: {},
        saveList: [],
        visible: false,
        title: '修改'
      }
    },
    created() {
      this.getSaveData();
    },
    methods: {
      getSaveData() {
        findData().then(res => {
          this.saveList = res.data;
        })
      },
      //修改
      handleUpdate(row) {
        this.visible = true;
        this.form = {
          ...row
        }
      },
      //提交
      submitForm() {
        this.$refs.formRef.validate((valid) => {
          if (valid) {
            // 调用相应的 API 方法
            putData(this.form).then(res => {
              this.$message({
                message: res.msg, // 显示成功消息
                type: 'success',
              });
              // 提交成功后可以选择清空表单
              this.cancel();
              this.getSaveData();
            }).catch(err => {
              this.$message({
                message: err?.msg || '操作失败', // 捕获错误信息
                type: 'error',
              });
            });
          } else {
            // 校验失败
            return false;
          }
        });
      },
      cancel() {
        this.$refs.formRef.resetFields();
        this.visible = false;
      }
    }
  }
</script>

<style>
</style>
